* {
    user-select: none;
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    background-color: #252525;
}

.container {
    height: 20vw;
    width: 20vw;
    position: fixed;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    overflow: hidden;
    border-radius: 10px;
}

.drag-bar {
    height: 40px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #d8dadb;
}
.drag-bar:active {
    cursor: move;
}

.content {
    height: calc(100% - 30px);
    width: 100%;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f3f4;
}

/* 四条边可拖动区域 */

.edge {
    display: block;
    position: absolute;
    z-index: 10;
    /* background-color: #febc2e; */
}

.edge-bottom {
    width: 100%;
    height: 6px;
    bottom: -2px;
}

.edge-top {
    width: 100%;
    height: 6px;
    top: -2px;
}

.edge-left {
    height: 100%;
    width: 6px;
    left: -2px;
    top: 0;
}

.edge-right {
    height: 100%;
    width: 6px;
    right: -2px;
    top: 0;
}

/* 鼠标悬停时改变鼠标样式 */
.edge-top:hover,
.edge-bottom:hover {
    cursor: ns-resize;
}
.edge-left:hover,
.edge-right:hover {
    cursor: ew-resize;
}

/* 四边角 */

.corner {
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    z-index: 11;
    /* background-color: #1c0abe; */
}

.corner-lt {
    top: -2px;
    left: -2px;
}

.corner-lb {
    bottom: -2px;
    left: -2px;
}

.corner-rt {
    top: -2px;
    right: -2px;
}

.corner-rb {
    bottom: -2px;
    right: -2px;
}

.corner-lt:hover,
.corner-rb:hover {
    cursor: nwse-resize;
}
.corner-rt:hover,
.corner-lb:hover {
    cursor: nesw-resize;
}

/* 图标按钮 */

.w-out,
.w-narrow,
.w-ext {
    --width: 20px;
    --bg-color: rgba(60, 59, 59, 0.782);
    position: relative;
    width: var(--width);
    height: var(--width);
    border-radius: 50%;
}

.w-out {
    background-color: #ff5f57;
}

.w-out:hover::before,
.w-out:hover::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 80%;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    background-color: var(--bg-color);
}

.w-out::before {
    transform: rotate(45deg);
}

.w-out::after {
    transform: rotate(-45deg);
}

.w-narrow {
    background-color: #febc2e;
}

.w-narrow:hover::before {
    content: "";
    background-color: var(--bg-color);
    position: absolute;
    height: 10%;
    width: 80%;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}

.w-ext {
    background-color: #29c940;
}

.w-ext:hover::before,
.w-ext:hover::after {
    --border-width: 4px;
    content: "";
    position: absolute;

    left: 50%;
    top: 50%;
    transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));

    width: 0;
    height: 0;
    border-top: var(--border-width) solid transparent;
    border-bottom: var(--border-width) solid transparent;
    border-left: var(--border-width) solid transparent;
    border-right: var(--border-width) solid transparent;
}
.w-ext:hover:before {
    border-bottom-color: var(--bg-color);
    transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1)) rotate(135deg)
        translate(0, calc(var(--border-width) * -2));
}

.w-ext:hover:after {
    transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1)) rotate(135deg)
        translate(0, calc(var(--border-width) * 2));

    border-top-color: var(--bg-color);
}

/* 拖拽效果 */
.drag-bar-fallback {
    opacity: 1 !important;
}
.drag-bar-ghost {
    visibility: hidden;
}
